<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/resources/css/table.css?r=3" rel="stylesheet">
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js"></script>
    <script type="text/javascript" src="/resources/js/md5.js"></script>
    <script type="text/javascript" src="/resources/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/resources/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="/resources/js/Util.js"></script>
    <script src="/resources/js/fk.js"></script>
    <link href="/resources/video/css/video-js.css" rel="stylesheet">
    <script src="/resources/video/js/video.min.js"></script>
    <script src="/resources/video/js/videojs-contrib-hls.js"></script>
    <style type="text/css">
        body{background-color: #191919}

        #example-video{
            margin: 0 auto;
            width: 80%;
            height:600px;
        }
    </style>
</head>
<body>
<div id="videoDiv" style="height:100%;width:100%">

</div>
</body>
<script type="application/javascript">

    $(function () {
        var   videoCode = getUrlParam("videoCode");
        $("#videoDiv").html(buildHtml(videoCode));
        playVideo();
    });

    function calcVideoUrl(videoCode) {
        // 218.57.221.222:6713
        var url = "http://218.57.221.222:6713/mag/hls/"+videoCode+"/1/live.m3u8?r="+new Date().getTime();
        return url;
    }
    function buildHtml(videoCode) {
        var url = calcVideoUrl(videoCode);
        var videoHtml =
            "<video id='example-video' class='video-js' autoplay='autoplay' controls preload='auto' width='600' height='800' >"+
            "<source id='video-player' src='"+url+"' type='application/x-mpegURL'>"+
            "</video>";
        return videoHtml;
    }
    function playVideo() {
        var player = videojs('example-video');
        player.play();
    }
</script>
</html>